<template>
	<view>
		<view class="custom-navbar" :style="{'height':capsuleTop}">
			<view class="custom-navbar-title">
				天天囤券
			</view>
		</view>
		<view class="content" :style="{'margin-top':capsuleTop}">
			<!-- 轮播 -->
			<view class="swiper-img">
				<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="3000"
					:duration="1000">
					<swiper-item v-for="(item,index) in swiperList" :key="index">
						<image class="swiper-imgs" :src="item.img" mode=""></image>
					</swiper-item>
				</swiper>
			</view>
			<view class="aside">
				<button v-if="!phone" class="card-btns" open-type="getPhoneNumber" plain="true"
					@getphonenumber="handlePhone">券券支付</button>
				<view v-else class="aside-left-title" @click="payshowFn">
					券券支付
				</view>
				<view class="aside-left-dian" :style="{left:phone ? '39rpx' : '45rpx'}" @click="payshowFn">
					....
				</view>
				<image class="aside-img1"
					src="https://www.tunquanquan.Com/CloudPhoneMain/v1/applet/loadImg?path=static/index/quan1.png"
					mode="" @click="show = true"></image>
				<view class="aside-left" @click="payshowFn">

				</view>
				<view class="aside-right">

				</view>
				<view class="aside-right-title">
					券余额
				</view>
				<view class="aside-right-dian">
					{{!voucher ? 0 : voucher}}<text style="font-size: 26rpx;">元</text>
				</view>
				<image class="aside-img2"
					src="https://www.tunquanquan.Com/CloudPhoneMain/v1/applet/loadImg?path=static/index/quan2.png"
					mode="">
				</image>
			</view>
			<view class="card" v-if="member == 0 || !member">
				<image class="card-img"
					src="https://www.tunquanquan.Com/CloudPhoneMain/v1/applet/loadImg?path=static/index/zuanshi.png"
					mode=""></image>
				<view class="card-text">
					会员卡 <text style="color: #FFC95E;font-size:30rpx ;">199</text>元/年
				</view>
				<view class="card-text1">
					专享 <text style="color: #FFC95E;font-size:26rpx ;">消费多少送多少</text>特权
				</view>
				<!-- <view class="card-btn" @click="popupShow = true"> -->
				<button v-if="!phone" class="card-btn" open-type="getPhoneNumber"
					@getphonenumber="handlePhone">立即购买</button>
				<view v-else class="card-btn" @click="phoneBtn">
					立即购买
				</view>
			</view>

			<view class="footer">
				<view class="footer-title">
					其他服务
				</view>
				<view class="footer-list">
					<view class="footer-card" v-for="(item,index) in list" :key="index" @click="typeFn(item,index)">
						<view class="" v-if="item.id">
							<view class="footer-item">
								<image class="footer-img" :src="item.imgs ? item.imgs :jiaUrl1" mode=""></image>
							</view>
							<view class="footer-name">
								{{ index  == 0  ? '扫一扫'  : item.name}}
							</view>
						</view>
						<view class="" v-else>
							<view class="footer-item">
								<image class="footer-img" :src="jiaUrl" mode=""></image>
							</view>
							<view class="footer-name">
								{{index == 0  ? '扫一扫'  : item.name}}
							</view>
						</view>

					</view>

				</view>
			</view>
		</view>
		<view>
			<paycheck :shows="shows" @close1="close1" @successMember="successMember"></paycheck>
			<memberPay :payshow="payshow" :phone="phone" :url="url" @close="close" @reset="reset"></memberPay>
		</view>
		<u-mask :show="showMoney">
			<view class="warp">
				<view class="money-input">
					<view class="money-text1">
						温馨提示
					</view>
					<view class="money-text1">
						{{qucodeTitle}}
					</view>
					<view class="money-btn">
						<!-- <view class="btn-left" @click="customClose">
							取消
						</view> -->
						<view class="btn-right" @click="handlePayNewClick">
							确定
						</view>
					</view>
				</view>
			</view>
		</u-mask>
		<!-- <u-popup v-model="showTitle" mode="center" height="600px" :mask-close-able="false" :safeAreaInsetBottom="false">
			<view>
				<text>出淤泥而不染，濯清涟而不妖</text>
			</view>
		</u-popup>
		<u-button @click="open">打开</u-button> -->

	</view>
</template>

<script>
	import {
		log
	} from 'util';
	import {
		paycheck
	} from '../comments/comments.vue'
	import {
		memberPay
	} from '../comments/memberpay.vue'

	export default {
		components: {
			paycheck,
			memberPay
		},
		data() {
			return {
				qrcodeSrc: '',
				show: false,
				shows: false,
				timestamp: 3,
				showTitle: false,
				payshow: false,
				jiaUrl: 'https://www.tunquanquan.Com/CloudPhoneMain/v1/applet/loadImg?path=static/index/card7.png',
				jiaUrl1: 'https://www.tunquanquan.Com/CloudPhoneMain/v1/applet/loadImg?path=static/index/card1.png',
				list: [],
				swiperList: [{
						img: 'https://www.tunquanquan.Com/CloudPhoneMain/v1/applet/loadImg?path=static/index/banner.png'
					},
					{
						img: 'https://www.tunquanquan.Com/CloudPhoneMain/v1/applet/loadImg?path=static/index/banner2.png'
					}, {
						img: 'https://www.tunquanquan.Com/CloudPhoneMain/v1/applet/loadImg?path=static/index/banner3.png'
					}
				],
				bannerdata: [],
				recomdata: [],
				billdata: [],
				capsuleTop: uni.getMenuButtonBoundingClientRect().top + 35.5 + 'px',
				popupShow: false,
				poprp: 'https://www.tunquanquan.Com/CloudPhoneMain/v1/applet/loadImg?path=static/pay/bg1.png',
				money: '',
				member: '',
				imgUrl: '',
				url: '',
				value: '',
				phone: '',
				voucher: '',
				showMoney: false, //修改金额
				qucodeTitle:'',//二维码温馨提示,
				qrcode:'',//二维码
			}
		},
		onLoad(options) {
			console.log(options, 'options')
			if (options.value) {
				this.value = options.value;
				console.log(this.value, 'this.value');
			}
				
			if(options.q){
				let url =   decodeURIComponent(options.q);
				console.log(url,'url')
				let names = this.getQueryStringByName(url, 'name');
				let money = this.getQueryStringByName(url, 'money');
				this.qrcode = this.getQueryStringByName(url, 'qrcode');
				this.qucodeTitle = '恭喜您成功申请'+ names+ '店' +  money + '元代金券 ，请等待店长确认'
				this.showMoney = true;
			}
			
			// 设置渐变色，这里以线性渐变为例，可以自定义渐变的方向和颜色
			uni.setNavigationBarColor({
				frontColor: '#ffffff', // 前景色值，包括按钮、标题、状态栏的颜色
				'background-image': 'linear-gradient(to bottom, #FF5E5B, #FF9A9E)',
			});
		},
		onShow() {
			let token = uni.getStorageSync('token');
			console.log(token, 'token');
			if (token) {
				this.getindex();
				this.getUrl();

			} else {
				this.index();

			}

		},
		watch: {},
		methods: {
			//关闭弹窗
			customClose() {
				this.showMoney = false;
			},
			// open(){
			//   this.showTitle = true;
			//   uni.hideTabBar();	
			// },
			//确定按钮
			handlePayNewClick() {
			this.sumbitSet();
			},
			async  sumbitSet() {
				let obj = {
					codeid: this.qrcode
				}
				try {
					let data = await new this.Request(this.Urls.m().applyVoucher, obj).modepost();
					this.showMoney =  false;
				
				} catch (e) {
					console.log(e, 'e')
				
				}
			},
			async handlePhone(e) {

				let params = {
					code: e.detail.code
				};
				try {
					let data = await new this.Request(this.Urls.m().getphone, params).modepost();
					uni.setStorageSync('phone', data.data.phone);
					this.phone = data.data.phone;
					new this.$Toast('获取成功').showtoast();
				} catch (e) {
					console.log(e, 'e')
					new this.$Toast('获取失败').showtoast();
				}

			},
			//截取内容
			getQueryStringByName(url, name) {
				var result = url.match(new RegExp("[\?\&]" + name + "=([^\&]+)", "i"));
				if (result == null || result.length < 1) {
					return "";
				};
				return result[1];
			},
			close1() {
				this.shows = false;
			},
			successMember() {
				this.shows = false;
				new this.$Toast('购买会员成功！').showtoast();
				let token = uni.getStorageSync('token');
				console.log(token, 'token');
				if (token) {
					this.getindex();
					this.getUrl();

				} else {
					this.index();

				}
			},
			close() {
				this.payshow = false;
			},
			phoneBtn() {
				this.shows = true;
			},
			reset() {
				this.getUrl();
			},
			payshowFn() {
				if (this.phone) {
					this.payshow = true;
				}
			},
			//功能块点击按钮
			typeFn(item, i) {
				if (i == 0) {
					uni.scanCode({
						success: (res) => {
							console.log(res,'res')
							if (res.result) {
								let url = res.result;
								//1.设备码类
								let names = this.getQueryStringByName(url, 'name');
								let money = this.getQueryStringByName(url, 'money');
								this.qrcode = this.getQueryStringByName(url, 'qrcode');
								this.qucodeTitle = '恭喜您成功申请'+ names+ '店' +  money + '元代金券 ，请等待店长确认'
								this.showMoney = true;
							}
						}
					});
				} else {
					if (item.url) {
						//我们自己的h5链接
						uni.navigateTo({
							url: "/pages/webview/index?url=" + encodeURIComponent(JSON.stringify(item.url))
						});
					} else if (item.appid) {
						uni.navigateToMiniProgram({
							appId: item.appid,
							path: item.path,
							extraData: {
								'data1': 'test'
							},
							success(res) {
								// 打开成功
							}
						})
					} else if (item.urls) {
						uni.navigateTo({
							url: item.urls
						});
					} else {
						uni.showToast({
							title: "正在开发中，敬请期待！",
							icon: 'none',
							mask: true,
						});
					}
				}
				// uni.navigateTo({
				// 	url: '/pages/shopping/order'
				// });

			},
			//首页登录
			index() {
				uni.login({
					provider: 'weixin',
					success: res => {
						console.log(res, 'code');
						this.modifyAdd(res.code);
					}
				});
			},
			async vg() {
				let obj = {
					value: this.value
				}
				try {
					let data = await new this.Request(this.Urls.m().vg, obj).modepost();
					if (data.code == 0) {
						uni.showToast({
							title: data.msg,
							icon: 'none',
							mask: true,
						});
					}
				} catch (e) {
					console.log(e, 'e')

				}

			},
			async modifyAdd(code) {
				let obj = {
					code: code
				}
				try {
					let data = await new this.Request(this.Urls.m().login, obj).modepost();
					uni.setStorageSync('token', data.data.token);
					uni.setStorageSync('userid', data.data.userid);
					if (data.code == 0) {
						this.getindex();
						this.getUrl();
					}
				} catch (e) {
					console.log(e, 'e')

				}

			},
			async getUrl() {

				try {
					let data = await new this.Request(this.Urls.m().scan).modepost();
					this.url = data.data.url;
				} catch (e) {
					console.log(e, 'e')

				}

			},

			async getindex() {
				try {
					let data = await new this.Request(this.Urls.m().index).modepost();
					console.log(data, '首页')
					uni.setStorageSync('phone', data.data.user.phone);
					this.money = data.data.user.money;
					this.member = data.data.user.member;
					this.phone = data.data.user.phone;
					this.voucher = data.data.voucher;
					if (this.value) {
						this.vg();
					}
					this.list = data.data.menu;
					if (this.list.length < 8) {
						for (var i = data.data.menu.length; i < 8; i++) {

							this.list.push({
								name: '敬请期待'
							})
						}

					}
					console.log(data, 'data')
				} catch (e) {
					console.log(e, 'e')

				}

			},
			handlePopupImgClick() {
				this.$emit('img-click');
			},
			handleCloseClick() {
				this.$emit('close');
			},

			handleEnd() {
				//倒计时结束把弹窗关闭
				this.handleCloseClick();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.custom-navbar {
		// display: flex;
		// justify-content: center;
		// align-items: center;
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 999;
		text-align: center;
		font-size: 44rpx;
		font-family: YouSheBiaoTiHei;
		font-weight: 500;
		color: #333333;
		/* 导航栏高度 */
		background-image: linear-gradient(to right, #caecf8 0%, #fff 100%);
		/* 渐变色 */
		/* 其他样式 */
	}

	.custom-navbar-title {
		width: 100%;
		position: absolute;
		bottom: 10rpx;
		text-align: center;
	}

	.custom-top {
		width: 100%;
	}

	.top-height {
		background: linear-gradient(to right, #51D3F4, #fff);
	}

	.content {
		overflow: hidden;
	}

	.content-top {
		width: 100%;
	}

	.swiper-img {
		margin: 50rpx auto 0;
		width: 92%;
		border-radius: 26rpx;
	}

	.swiper-imgs {
		width: 100%;
		height: 324rpx;
	}

	.aside {
		position: relative;
		margin: 84rpx auto 0;
		width: 92%;
	}

	.aside-left {
		overflow: hidden;
		margin-right: 2%;
		display: inline-block;
		width: 48%;
		height: 173rpx;
		background: #4F74FF;
		opacity: 0.2;
		border-radius: 20rpx;
	}

	.aside-right {
		margin-left: 2%;
		display: inline-block;
		width: 48%;
		height: 173rpx;
		background: #FF95A5;
		opacity: 0.2;
		border-radius: 20rpx;
	}

	.card {
		position: relative;
		margin: 61rpx auto 0;
		width: 92%;
		height: 158rpx;
		background: #382E2B;
		border-radius: 20rpx;
	}

	.card-img {
		width: 158rpx;
		height: 158rpx;
	}

	.card-text {
		position: absolute;
		top: 37rpx;
		left: 143rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #FEEFD2;
	}

	.card-text1 {
		position: absolute;
		top: 87rpx;
		left: 143rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #FEEFD2;
	}

	.card-btn {
		position: absolute;
		top: 49rpx;
		right: 28rpx;
		width: 160rpx;
		height: 56rpx;
		background: #FEEED2;
		border-radius: 28rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #382E2B;
		text-align: center;
		line-height: 56rpx;
	}

	.card-btns {
		position: absolute;
		top: 16rpx;
		z-index: 9999;
		left: 0;
		padding-right: 70px;
		width: 165px;
		height: 172rpx;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #4E76FF;
		border: 0;
	}

	.footer {
		width: 100%;
		height: 741rpx;
		background: #FFFFFF;
		border-radius: 26rpx 26rpx 0rpx 0rpx;
	}

	.footer-title {
		margin: 29rpx 0 0 40rpx;
		height: 30rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		line-height: 38rpx;
	}

	.footer-list {
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
	}

	.footer-card {
		margin-top: 40rpx;
	}

	.footer-item {
		width: 126rpx;
		height: 126rpx;
		margin: 20rpx;
		border-radius: 26rpx;
	}

	.footer-img {
		width: 126rpx;
		height: 126rpx;
	}

	.footer-name {
		text-align: center;
		height: 25rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.aside-left-title {
		position: absolute;
		top: 37rpx;
		left: 35rpx;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #4E76FF;
	}

	.aside-right-title {
		position: absolute;
		top: 37rpx;
		left: 393rpx;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #FF5C72;
	}

	.aside-left-dian {
		position: absolute;
		bottom: 50rpx;
		left: 45rpx;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #4E76FF;
	}

	.aside-right-dian {
		position: absolute;
		bottom: 47rpx;
		left: 393rpx;
		font-size: 36rpx;
		font-family: DIN;
		font-weight: bold;
		color: #FF5C72;
	}

	.aside-img1 {
		position: absolute;
		top: -21rpx;
		left: 199rpx;
		width: 124rpx;
		height: 152rpx;

	}

	.aside-img2 {
		position: absolute;
		top: -19rpx;
		right: 27rpx;
		width: 124rpx;
		height: 152rpx;
	}

	.popup-content {
		margin: 20rpx auto 0;
		width: 666rpx;
		height: 1086rpx;
		background: no-repeat;
		background-size: 100% 100%;
	}

	.popup-title {
		text-align: center;
		margin: 30rpx auto;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #333333;
		line-height: 38rpx;
	}

	.popup-top {
		width: 100%;
		display: inline-block;
		overflow: hidden;
		margin: 92rpx auto 0;
		font-size: 40rpx;
		font-family: DIN;
		font-weight: bold;
		color: #000000;
		text-align: center;
	}

	.popup-img {
		margin: 99rpx auto 0;
		display: block;
		width: 528rpx;
		height: 528rpx;
	}

	.popup-btn1 {
		margin: 43rpx auto 0;
		width: 256rpx;
		height: 80rpx;
		background: #e1f7fc;
		border-radius: 40rpx;
		font-size: 30rpx;
		text-align: center;
		line-height: 80rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #34C8E8;
	}

	.popup-btn2 {
		margin: 43rpx auto 0;
		width: 256rpx;
		height: 80rpx;
		background: #fff3dd;
		border-radius: 40rpx;
		font-size: 30rpx;
		text-align: center;
		line-height: 80rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFB119;
	}

	.warp {
		margin: 0 auto;
		width: 90%;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	u-mask {
		z-index: 9999999 !important;
	}

	.money-input {
		padding: 0 30rpx;
		width: 80%;
		/* height: 300rpx; */
		background: #FFFFFF;
		border-radius: 20rpx;
	}

	.money-text1 {
		margin: 30rpx 0;
		text-align: center;
	}

	.money-ipt {
		position: relative;
		margin: 20rpx auto 0;
		width: 80%;
	}

	.money-span {
		position: absolute;
		width: 5rpx;
		height: 70rpx;
		line-height: 70rpx;
		top: 0;
		right: 40rpx;
	}

	.money-text2 {
		margin: 20rpx 0 0 10%;
		width: 80%;
		color: red;
	}

	.money-btn {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.btn-left {
		margin: 40rpx auto;
		padding: 10rpx 0;
		width: 30%;
		text-align: center;
		background-color: #34C8E8;
		color: #fff;
		border-radius: 50rpx;
	}

	.btn-right {
		margin: 40rpx auto;
		padding: 10rpx 0;
		width: 40%;
		text-align: center;
		background-color: #34C8E8;
		color: #fff;
		border-radius: 50rpx;
	}
</style>